<template>
    <div class="dept-manager">
        <!-- 部门查询   -->
        <div class="query-form">
            <el-form size="small" :inline="true" ref="queryForm" :model="queryForm" class="demo-form-inline">
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="queryForm.deptName" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetForm('queryForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 部门列表渲染 -->
        <div class="base-table">
            <!-- 新增按钮 -->
            <div class="action">
                <el-button type="primary" size="small" @click="handleOpen">创建</el-button>
            </div>
            <!-- 部门列表   -->
            <el-table :data="deptList" size="mini" style="width: 100%; margin-bottom: 20px" row-key="_id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column v-for="item in columns" :formatter="item.formatter" :key="item.prop" :prop="item.prop" :label="item.label">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 部门弹窗 -->
        <el-dialog :title="title" :visible.sync="showModal">
            <el-form :model="deptForm" ref="form" :rules="rules" label-width="100px">
                <el-form-item label="上级部门" prop="parentId">
                    <el-cascader v-model="deptForm.parentId" :options="deptList" placeholder="请选择上级部门" :props="{ checkStrictly: true , label : 'deptName', value : '_id' }" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="deptForm.deptName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="userName">
                    <el-select v-model="deptForm.userName" placeholder="请选择部门负责人" @change="handleChange">
                        <el-option v-for="item in usersList" :key="item._id" :label="item.userName" :value="`${item.userId}/${item.userName}/${item.userEmail}`"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人邮箱" prop="userEmail">
                    <el-input v-model="deptForm.userEmail" disabled placeholder="请输入负责人邮箱" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showModal = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Day80Dept",

  data() {
    return {
      queryForm: {
        deptName: ""
      },
      title: "",
      rules: {
        parentId: [
          { required: true, message: "请选择上级部门", trigger: "change" }
        ],
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入用户名称", trigger: "change" }
        ]
      },
      userList: [],
      showModal: false,
      deptForm: {
        action: "",
        parentId: [],
        deptName: "",
        userName: "",
        userEmail: "",
        userId: ""
      },
      deptList: [],
      columns: [
        {
          label: "部门名称",
          prop: "deptName"
        },
        {
          label: "负责人",
          prop: "userName"
        },
        {
          label: "更新时间",
          prop: "updataTime",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          }
        },
        {
          laber: "创建时间",
          prop: "createTime",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          }
        }
      ]
    };
  },
  created() {
    this.getDeptList();
    this.getUsersList();
  },
  mounted() {},

  methods: {
    async getDeptList() {
      let res = await this.deptApi.getDeptList(this.queryForm);
      console.log(res);
      this.deptList = res;
    },
    async getUsersList() {
        let res = await this.deptApi.getUsersAllList();
        console.log(res);
        this.userList = res
    },
    handleQuery(){
        this.getDeptList()
    },
    resetForm(formName){
        this.$refs[formName].resetFields();
    },
    async handleDelete(id){
        let res = await this.deptApi.deptOperate({_id:id,action:"delete"});
        this.$message.success("删除成功");
        this.getDeptList();
    },
    handleOpen(){
        this.showModal = true;
        this.$nextTick(()=>{
            this.$refs["form"].resetFields()
        });
        this.deptForm.action = "create;"
        this.title = "创建部门"
    },
    handleEdit(row){
        this.showModal  =true;
        this.deptForm.action = "edit";
        this.title = "编辑部门";
        this.$nextTick(()=>{
            Object.assign(this.deptForm,row)
        })
    },
    submitForm(){
        this.$refs["form"].validate(async valid=>{
            if(valid){
                let res = await this.deptApi.deptOperate(this.deptForm);
                this.showModal =false;
                this.getDeptList()
            }else{
                return false
            };

        })
    },
    handleChange(val){
        let [userId,userName,userEmail]=
        val.split("/")
        Object.assign(this.deptForm,{userId,userName,userEmail})
    }
   }
};
</script>

<style scoped>
</style>